{% extends 'base.html' %}

{% block title %}请假详情 - 请假审批系统{% endblock %}

{% block content %}
<div class="card">
    <div class="card-header">
        <h2>请假申请详情</h2>
        <div style="float: right;">
            {% if application.can_be_edited and application.applicant == user %}
            <a href="{% url 'edit_leave' application.id %}" class="btn btn-primary">编辑</a>
            {% endif %}
            {% if application.can_be_cancelled and application.applicant == user %}
            <a href="{% url 'cancel_leave' application.id %}" class="btn btn-danger" onclick="return confirm('确定要取消这个申请吗？')">取消</a>
            {% endif %}
            {% if can_approve %}
            <a href="{% url 'approve_leave' application.id %}" class="btn btn-success">审批</a>
            {% endif %}
        </div>
        <div style="clear: both;"></div>
    </div>
    
    <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 2rem;">
        <div>
            <h3 style="margin-bottom: 1rem; color: #333;">基本信息</h3>
            <table style="width: 100%;">
                <tr>
                    <td style="padding: 0.5rem 0; font-weight: 500; width: 120px;">申请人：</td>
                    <td style="padding: 0.5rem 0;">{{ application.applicant.get_full_name|default:application.applicant.username }}</td>
                </tr>
                <tr>
                    <td style="padding: 0.5rem 0; font-weight: 500;">工号：</td>
                    <td style="padding: 0.5rem 0;">{{ application.applicant.userprofile.employee_id }}</td>
                </tr>
                <tr>
                    <td style="padding: 0.5rem 0; font-weight: 500;">部门：</td>
                    <td style="padding: 0.5rem 0;">{{ application.applicant.userprofile.department|default:"未设置" }}</td>
                </tr>
                <tr>
                    <td style="padding: 0.5rem 0; font-weight: 500;">职位：</td>
                    <td style="padding: 0.5rem 0;">{{ application.applicant.userprofile.position }}</td>
                </tr>
                <tr>
                    <td style="padding: 0.5rem 0; font-weight: 500;">请假类型：</td>
                    <td style="padding: 0.5rem 0;">{{ application.leave_type.name }}</td>
                </tr>
                <tr>
                    <td style="padding: 0.5rem 0; font-weight: 500;">开始日期：</td>
                    <td style="padding: 0.5rem 0;">{{ application.start_date }}</td>
                </tr>
                <tr>
                    <td style="padding: 0.5rem 0; font-weight: 500;">结束日期：</td>
                    <td style="padding: 0.5rem 0;">{{ application.end_date }}</td>
                </tr>
                <tr>
                    <td style="padding: 0.5rem 0; font-weight: 500;">请假天数：</td>
                    <td style="padding: 0.5rem 0;">{{ application.days_requested }}天</td>
                </tr>
                <tr>
                    <td style="padding: 0.5rem 0; font-weight: 500;">当前状态：</td>
                    <td style="padding: 0.5rem 0;">
                        <span class="status-badge status-{{ application.status }}">
                            {{ application.get_status_display }}
                        </span>
                    </td>
                </tr>
            </table>
        </div>
        
        <div>
            <h3 style="margin-bottom: 1rem; color: #333;">申请详情</h3>
            <div style="margin-bottom: 1rem;">
                <strong>请假原因：</strong>
                <div style="margin-top: 0.5rem; padding: 1rem; background: #f8f9fa; border-radius: 5px;">
                    {{ application.reason|linebreaks }}
                </div>
            </div>
            
            {% if application.work_handover %}
            <div style="margin-bottom: 1rem;">
                <strong>工作交接：</strong>
                <div style="margin-top: 0.5rem; padding: 1rem; background: #f8f9fa; border-radius: 5px;">
                    {{ application.work_handover|linebreaks }}
                </div>
            </div>
            {% endif %}
            
            {% if application.emergency_contact %}
            <div style="margin-bottom: 1rem;">
                <strong>紧急联系人：</strong> {{ application.emergency_contact }}
                {% if application.emergency_phone %}
                <br><strong>联系电话：</strong> {{ application.emergency_phone }}
                {% endif %}
            </div>
            {% endif %}
            
            {% if application.attachment %}
            <div style="margin-bottom: 1rem;">
                <strong>附件：</strong>
                <a href="{{ application.attachment.url }}" target="_blank" class="btn btn-secondary" style="padding: 0.25rem 0.5rem; font-size: 0.875rem;">下载附件</a>
            </div>
            {% endif %}
        </div>
    </div>
</div>

<div class="card">
    <div class="card-header">
        <h2>审批记录</h2>
    </div>
    
    {% if approval_records %}
    <div style="position: relative;">
        {% for record in approval_records %}
        <div style="display: flex; margin-bottom: 1.5rem; padding-bottom: 1.5rem; {% if not forloop.last %}border-bottom: 1px solid #eee;{% endif %}">
            <div style="width: 60px; text-align: center; margin-right: 1rem;">
                <div style="width: 40px; height: 40px; border-radius: 50%; background: 
                    {% if record.action == 'submit' %}#007bff
                    {% elif record.action == 'approve' %}#28a745
                    {% elif record.action == 'reject' %}#dc3545
                    {% elif record.action == 'cancel' %}#6c757d
                    {% else %}#ffc107{% endif %}; 
                    color: white; display: flex; align-items: center; justify-content: center; font-weight: bold; margin: 0 auto;">
                    {% if record.action == 'submit' %}提
                    {% elif record.action == 'approve' %}批
                    {% elif record.action == 'reject' %}拒
                    {% elif record.action == 'cancel' %}消
                    {% else %}退{% endif %}
                </div>
                {% if not forloop.last %}
                <div style="width: 2px; height: 30px; background: #ddd; margin: 5px auto;"></div>
                {% endif %}
            </div>
            <div style="flex: 1;">
                <div style="font-weight: 500; margin-bottom: 0.25rem;">
                    {{ record.approver.get_full_name|default:record.approver.username }} - {{ record.get_action_display }}
                </div>
                <div style="color: #666; font-size: 0.875rem; margin-bottom: 0.5rem;">
                    {{ record.created_at|date:"Y年m月d日 H:i" }}
                </div>
                {% if record.comments %}
                <div style="background: #f8f9fa; padding: 0.75rem; border-radius: 5px; font-size: 0.9rem;">
                    {{ record.comments|linebreaks }}
                </div>
                {% endif %}
            </div>
        </div>
        {% endfor %}
    </div>
    {% else %}
    <p style="text-align: center; color: #666; padding: 2rem;">暂无审批记录</p>
    {% endif %}
</div>

<div style="text-align: center; margin-top: 2rem;">
    <a href="javascript:history.back()" class="btn btn-secondary">返回</a>
</div>
{% endblock %}
